{% extends 'insight/layout.html' %}
{% block title %}换电服务列表{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <div class="col" align="center">
            <h2>{{station.station_name}}</h2>
            <table class="table table-striped">
                <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>车牌号码</th>
                            <th>开始换电时间</th>
                            <th>结束换电时间</th>
                            <th>换电类型</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% if current_page %}
                        {% for service in current_page %}
                        <tr>
                            <td><a href="/insight/service_feature/{{service.order_sn}}/">{{ service.order_sn }}</a></td>
                            <td>{{ service.plate_number }}</td>
                            <td>{{ service.start_time }}</td>
                            <td>{{ service.stop_time }}</td>
                            <td>{{ service.swap_type }}</td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <p>未查询到换电记录</p>
                    {% endif %}
                    </tbody>
            </table>
        </div>
    </div>
    <!-- 分页控件 -->
        {% if paginator.num_pages > 1 %}  <!-- 只有多页时才显示分页 -->
        <div class="flex items-center justify-between border-t border-gray-200 px-4 py-3 sm:px-6">
            <!-- 分页信息 -->
            <div class="hidden sm:block">
                <p class="text-sm text-gray-700">
                    显示第 <span class="font-medium">{{ current_page.number }}</span> 页，
                    共 <span class="font-medium">{{ paginator.num_pages }}</span> 页，
                    总计 <span class="font-medium">{{ paginator.count }}</span> 条记录
                </p>
            </div>

            <!-- 页码导航 -->
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                <!-- 上一页 -->
                {% if current_page.has_previous %}
                    <a href="?page={{ current_page.previous_page_number }}"
                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <span class="sr-only">上一页</span>
                        <i class="fa fa-chevron-left text-xs"></i>
                    </a>
                {% else %}
                    <!-- 上一页不可用时禁用 -->
                    <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-500 cursor-not-allowed">
                        <i class="fa fa-chevron-left text-xs"></i>
                    </span>
                {% endif %}

                <!-- 页码列表（只显示当前页附近的页码） -->
                {% for num in current_page.paginator.page_range %}
                    {% if current_page.number == num %}
                        <!-- 当前页 -->
                        <span class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                            {{ num }}
                        </span>
                    {% elif num > current_page.number|add:'-3' and num < current_page.number|add:'3' %}
                        <!-- 显示当前页前后2页 -->
                        <a href="?page={{ num }}"
                           class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                            {{ num }}
                        </a>
                    {% elif num == 1 or num == paginator.num_pages %}
                        <!-- 显示第一页和最后一页 -->
                        <a href="?page={{ num }}"
                           class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                            {{ num }}
                        </a>
                    {% elif num == current_page.number|add:'-3' or num == current_page.number|add:'3' %}
                        <!-- 显示省略号 -->
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                            ...
                        </span>
                    {% endif %}
                {% endfor %}

                <!-- 下一页 -->
                {% if current_page.has_next %}
                    <a href="?page={{ current_page.next_page_number }}"
                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <span class="sr-only">下一页</span>
                        <i class="fa fa-chevron-right text-xs"></i>
                    </a>
                {% else %}
                    <!-- 下一页不可用时禁用 -->
                    <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-500 cursor-not-allowed">
                        <i class="fa fa-chevron-right text-xs"></i>
                    </span>
                {% endif %}
            </nav>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}